<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实训</title>
    <link rel="stylesheet" href="实训1.css">
</head>

<body>
    <div class="wrapper">
        <!-- 头部内容 logo+导航栏 -->
        <header>
            <div class="logo"><a href="#"><img src="实训一素材//img/logo.png" alt="logo"></a></div>
            <!-- 导航栏 -->
            <nav>
                <ul>
                    <li> <a href="#">Home</a></li>
                    <li> <a href="#">About</a> </li>
                    <li> <a href="#">Features</a> </li>
                    <li> <a href="#">Portfolio</a> </li>
                    <li> <a href="#">Pricing</a> </li>
                    <li> <a href="#">Blog</a> </li>
                    <li> <a href="#">Contact</a> </li>
                </ul>
            </nav>
        </header>

        <div class="content">
            <!-- 上半部分 -->
            <header>
                <article>
                    <h1>HTML5</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
                        ut laoreet dolore magna aliquam erat volutpat. </p>
                    <h3>READ MORE</h3>
                </article>
            </header>
            <!-- 下半部分 -->
            <footer>
                <!-- 图文介绍 -->
                <section>
                    <h3>Latest Works</h3>

                    <article>
                        <img width="250px" src="实训一素材//img/car.jpg" alt="picture">
                        <h3>Mobile App</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                    </article>

                    <article>
                        <img width="250px" src="实训一素材//img/web_app1.jpg" alt="picture">
                        <h3>Mobile App</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                    </article>

                    <article>
                        <img width="250px" src="实训一素材//img/mobile_app1.jpg" alt="picture">
                        <h3>Mobile App</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                    </article>
                </section>
                <!-- 侧边栏 -->
                <aside>
                    <h3>Why graVis</h3>
                    <ul>
                        <li><a href="#"> Fully responsive so your content will always look good on any screen size</a>
                        </li>
                        <li><a href="#"> Awesome sliders give you the opportunity to showcase important content</a></li>
                        <li><a href="#"> Tested on iPhone and iPad with Retina Display</a></li>
                        <li><a href="#"> Multiple layout options for home pages, portfolio section & blog section</a>
                        </li>
                        <li><a href="#"> We offer very good support because we care about your site as much as you
                                do</a></li>
                        <li><a href="#"> Over 400 Icons</li>
                    </ul>
                </aside>
            </footer>
        </div>

    </div>
</body>

</html>